<template>
  <div class="editDialog">
    <el-dialog
      :visible.sync="editData.dialogVisible"
      :destroy-on-close="true"
      width="30%"
      :before-close="handleClose"
    >
      <template slot="title">
        <div style="font-weight: bold;">{{ editData.type === 'add' ? '新建样本库': '修改样本库' }}</div>
      </template>
      <el-form
        ref="userIdForm"
        :model="form"
        :rules="formRules"
      >
        <el-form-item
          prop="yangbenkmc"
          label="样本库名称："
          label-width="120px"
        >
          <el-input
            v-model="form.yangbenkmc"
            style="width: 80%"
            auto-complete="off"
            placeholder="请输入样本库名称"
          />
        </el-form-item>
        <el-form-item
          prop="yangbenlx"
          label="样本库类型："
          label-width="120px"
        >
          <el-select
            v-model="form.yangbenlx"
            style="width: 80%"
          >
            <el-option
              v-for="(item) in sampleTypeList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          prop="jiankusm"
          label="备注："
          label-width="120px"
        >
          <el-input
            v-model="form.jiankusm"
            style="width: 80%"
            auto-complete="off"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="editData.dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="submit"
        >确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { bankAdd, bankEdit } from '@/api/sampleBank'

export default {
  name: 'EditSample',
  props: ['editData', 'sampleTypeList'],
  data () {
    return {
      form: {
        yangbenkmc: '',
        yangbenlx: '',
        jiankusm: ''
      },
      formRules: {
        yangbenkmc: [
          { required: true, message: '样本库名称不能为空', trigger: ['blur', 'change'] }
        ],
        yangbenlx: [
          { required: true, message: '样本库类型不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  watch: {
    editData: {
      handler: function (val) {
        // if (!val.dialogVisible) {
        //   val.row = {}
        // }
        if (val.type === 'edit') {
          this.form = val.row;
        }else if (val.type === 'add') {
          this.form = {};
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // console.log(this.editData, '----')
    // this.form = this.editData.row
  },
  methods: {
    submit() {
      this.editData.dialogVisible = false
      // 请求api
      const params = {
        ...this.form
      }
      const apiName = this.form.type === 'add' ? bankAdd(params) : bankEdit(params)
      apiName.then(res => {
        console.log(res, '------submit dialog------')
        this.$message.success('操作成功');
        this.$parent.getBankList();              // DLJ APPEND 20210914
      })
    },
    handleClose() {
      this.editData.dialogVisible = false
    }
  }
}
</script>

<style lang="less" scoped>
.editDialog {
  font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
  .el-form {
    /deep/ .el-form-item .el-form-item__label {
      font-weight: normal;
      font-size: 14px;
    }
  }
  .el-select,
  .el-input {
    /deep/ .el-input__inner {
      color: #303133;
      font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
      background-color: #aaadb129;
    }
  }

  .el-button {
    padding: 10px 18px;
    font-family: "PingFang SC", Microsoft YaHei, Arial, sans-serif !important;
    color: #303133;
    font-size: 14px;
    font-weight: 700;

    &:hover {
      color: #4f74c4;
      border-color: #4f74c4;
      background: white;
    }

    &:focus {
      color: #1c3991;
      border-color: #1c3991;
      background: white;
    }

    &--danger {
      color: white;
      background: #f55656;
      &:hover {
        color: #fff;
        background-color: #ff8683;
        border-color: #ff8683;
      }
      &:focus {
        color: #fff;
        background-color: #cf3e43;
        border-color: #cf3e43;
      }
    }

    &--primary {
      color: white;
      background-color: #2d54b8;
      border-color: #2d54b8;

      &:hover {
        background: #4f74c4;
        border-color: #4f74c4;
        color: white;
      }

      &:focus {
        background: #1c3991;
        border-color: #1c3991;
        color: white;
      }
    }
  }
}
</style>
